


        .sideColor{
            background: #f7f7f7;
            width: 27.3%;
            height: 100%;
            position: fixed;
            left: 0px;
            top: 0px;
            z-index: -1;
        }

        main{
            padding-top: 0px !important;
        }

        .projectInfo{
            position: relative;
            overflow: hidden;
        }
        .projectInfo .letters{
            position: absolute;
            z-index: 1;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
        }
        .projectInfo .letters>*{
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        .projectInfo .letters .lft{
            width: 27.3%;
        }
        .projectInfo .letters .rht{
            width: 72.7%;
        }
        .projectInfo .letters .lft span{
            right: -25.5vw;
        }
        .projectInfo .letters .rht span{
            right: calc(100% + 25.5vw);
        }
        .projectInfo .letters span{
            position: absolute;
            font-weight: bold;
            font-size: 51vw;
            line-height: 1;
            color: #fa6a00;
            transform-origin: right center;
            transform:translateY(-50%) rotate(-90deg);
            transition: right 2.2s 2.8s cubic-bezier(.075,.82,.165,1),opacity 2.2s 2.8s ease;
        }
        .projectInfo .contn{
            position: relative;
            z-index: 2;
            color: #999;
        }
        .projectInfo .contn .txt{
            width: 60.82%;
            /* (27.3% - 4.62%) / (100% - 4.62% * 2) */
            margin-left: 24.98%;
            background: rgba(255,255,255,.96);
        }
        .projectInfo .contn .intro{
            padding-top: 100px;
            padding-bottom: 70px;
        }
        .projectInfo .contn .intro .prName{
            margin-bottom: 50px;
            margin-left: 9.62%;
            overflow: hidden;
        }
        .projectInfo .contn .intro .prName h2{
            font-size: 48px;
            color: #fa6a00;
            line-height: 1.28;
        }
        .projectInfo .contn .intro .box{
            align-items: flex-start;
        }
        .projectInfo .contn .intro .box .line{
            width: 12.91vw;
        }
        .projectInfo .contn .intro .box .line i{
            flex: 0;
            height: 1px;
            background: #e5e5e5;
            margin-left: -40px;
            
        }
        .projectInfo .contn .intro .box .line span{
            width: 9px;
            height: 9px;
            border: solid 2px #fa6a00;
            border-radius: 50%;
            margin-right: 1vw;
        }
        .projectInfo .contn .intro .box .ctnt{
            /* 90.76% * 60.82 * 23.4% */
            flex: 1;
        }
        .projectInfo .contn .intro .box .ctnt .prType{
            line-height: 9px;
            font-size: 12px;
            font-weight: bold;
        }
        .projectInfo .contn .intro .box .ctnt p{
            line-height: 3;
            font-size: 18px;
        }
        .projectInfo .contn .intro .box .ctnt .process{
            margin-top: 40px;
        }
        .projectInfo .contn .pic{
            padding-bottom: 46.52%;
            margin-right: -4.62vw;
            position: relative;
        }
        .projectInfo .contn .pic .picSwiper{
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 2;
            width: 100%;
            background: #fff;
        }
        .projectInfo .contn .pic .btns{
            position: absolute;
            width: 25%;
            left: calc(.2268 * (100vw - 17px));
            bottom: 0px;
            height: 160px;
            z-index: 3;
        }
        .projectInfo .contn .pic .btns p{
            width: 50%;
            height: 100%;
            background: #2f2f2e;
            transition: ease .5s background;
            position: relative;
        }
        .projectInfo .contn .pic .btns p::before{
            content: '';
            display: block;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .projectInfo .contn .pic .btns .prev::before{
            border-right: 5px solid #fff;
        }
        .projectInfo .contn .pic .btns .next::before{
            border-left: 5px solid #fff;
        }
        .projectInfo .contn .pic .btns p:hover{
            background: #3c3c3b;
        }
        .projectInfo .contn .pic .btns i{
            position: absolute;
            height: 60%;
            width: 1px;
            background: rgba(255,255,255,.1);
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            transition: opacity ease .5s;
        }
        .projectInfo .contn .pic .btns:hover i{
            opacity: 0;
        }
        .projectInfo .contn .pic .letter{
            overflow: hidden;
            display: none;
            position: absolute;
            bottom: 0;
            left: -6vw;
            width: 100vw;
            height: 83vw;
        }
        .projectInfo .contn .pic .letter span{
            overflow: hidden;
            bottom: -26vw;
            left: -78%;
            z-index: -1;
            font-size: 126vw;
            font-weight: bold;
            color: #fa6a00;
            line-height: 1;
            position: absolute;
        }
        .projectInfo .contn .details{
            padding-top: 130px;
            padding-bottom: 180px;
            padding-left: 12.91vw;
        }
        .projectInfo .contn .details p{
            font-size: 18px;
            line-height: 2.215;
        }
        .projectInfo .contn .details p + p{
            margin-top: 50px;
        }        
        .projectInfo .contn .data{
            margin-left: -4.62vw;
            height: 430px;
            background: rgba(60,60,59,.99);
        }
        .projectInfo .contn .data .item{
            width: 24%;
            align-items: flex-start;
            height: 100%;
            padding-top: 80px;
        }
        .projectInfo .contn .data .item:first-child{
            width: calc(.273 * (100vw - 17px));
            background: #3c3c3b;
        }
        .projectInfo .contn .data .item .line{
            flex: 1;
            justify-content: flex-end;
            width: 12.91vw;
        }
        .projectInfo .contn .data .item:first-child .line{
            width: 64.12%;
        }
        .projectInfo .contn .data .item .line i{
            width: 4vw;
            height: 1px;
            background: #fff;
            margin-left: -40px;
            
        }
        .projectInfo .contn .data .item .line span{
            width: 35px;
            height: 35px;
            border: solid 2px #fff;
            border-radius: 50%;
            margin-right: 2vw;
        }
        .projectInfo .contn .data .item .dataName{
            font-size: 12px;
            line-height: 35px;
            margin-bottom: 30px;
        }
        .projectInfo .contn .data .item .dataInfo p{
            font-size: 18px;
            line-height: 2.215;
        }
        .projectInfo .contn .data .switchData{
            position: absolute;
            top: 100%;
            left: 12.91vw;
            padding-top: 20px;
        }
        .projectInfo .contn .data .switchData p{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 20px;
            border: 2px solid #fff;
        }
        .projectInfo .contn .data .switchData p.current{
            background: #fff;
        }
        .projectInfo .contn .member{
            width: initial;
            padding-top: 230px;
            padding-bottom: 90px;
            position: relative;
            z-index: -1;
            margin-top: -130px;
            padding-left: 12.91vw;
            margin-right: -4.62vw;
            padding-right: 4.62vw;
        }
        .projectInfo .contn .txt.member{
            background: #fa6a00;
        }
        .projectInfo .contn .member p{
            font-size: 18px;
            color: #fff;
        }
        .projectInfo .contn .member p + p{
            margin-top: 20px;
        }
        

        @media(max-width:1024px){
            .projectInfo .contn .intro .prName h2{
                font-size: 36px;
            }
            .projectInfo .contn .details{
                padding-top: 90px;
                padding-bottom: 140px;
            }
            .projectInfo .contn .details p{
                font-size: 16px;
            }
            .projectInfo .contn .data .item .dataInfo p{
                line-height: 2;
            }
        }
        @media(min-width:961px){
            .projectInfo .contn .data .switchData{
                display: none;
            }
        }
        @media(max-width:960px){
            .projectInfo .contn .data{
                position: relative;
                height: 264px;
                background: #3c3c3b;
            }
            .projectInfo .contn .data .item{
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0px;
                width: 100% !important;
                padding-right: 20px;
                padding-top: 0px;
                height: initial;
            }
            
            .projectInfo .contn .data .item .line{
                width: 12.91vw !important;
                height: 35px;
                flex: initial;
                position: relative;
                justify-content: flex-start;
            }
            .projectInfo .contn .data .item .line i{
                width: 0%;
                margin-left: initial;
                transition: width .7s cubic-bezier(.645,.045,.355,1);
            }
            .projectInfo .contn .data .item .line span{
                position: absolute;
                left: 100%;
                top: 0px;
                transform: scale(0);
                transition:transform .7s cubic-bezier(.645,.045,.355,1);
            }
            .projectInfo .contn .data .item .dataTxt{
                flex: 1;
            }
            .projectInfo .contn .data .item .dataTxt>*{
                transform: translateX(50px);
                opacity: 0;
                transition: .7s cubic-bezier(.645,.045,.355,1);
            }
            .projectInfo .contn .data .item .dataTxt .dataName{
                margin-left: 18.5%;
            }
            .projectInfo .contn .data .item .dataInfo p{
                font-size: 14px;
                line-height: 1.6;
            }
            .projectInfo .contn .data .item .dataTxt .dataInfo br{
                display: none;
            }
            
            .projectInfo .contn .data .item.current .line i,
            .projectInfo .contn .data .item.current .line span,
            .projectInfo .contn .data .item.current .dataTxt .dataName{
                transition-delay: .7s;
            }
            .projectInfo .contn .data .item.current .dataTxt .dataInfo{
                transition-delay: .8s;
            }
            .projectInfo .contn .data .item.current .line i{
                width: 100%;
            }
            .projectInfo .contn .data .item.current .line span{
                transform: scale(1);
            }
            .projectInfo .contn .data .item.current .dataTxt>*{
                transform: translateX(0px);
                opacity: 1;
            }

            .projectInfo .contn .member{
                margin-left: -4.62vw;
            }
            .projectInfo .contn .member p{
                font-size: 14px;
            }
        }
        @media(max-width:767px){
            .sideColor{
                width: 100%;
                top: 100px;
            }
            .projectInfo .letters{
                display: none;
            }
            .projectInfo .contn .txt{
                margin-left: initial;
                background: initial;
                width: initial;
            }
            .projectInfo .contn .intro{
                padding-top: 50px;
            }
            .projectInfo .contn .intro .prName{
                margin-left: 0px;
                margin-bottom: 35px;
            }
            .projectInfo .contn .intro .prName h2{
                font-size: 20px;
            }
            .projectInfo .contn .intro .box .line{
                width: 7%;
            }
            .projectInfo .contn .intro .box .line i{
                margin-left: -6vw;
            }
            .projectInfo .contn .intro .box .line span{
                margin-right: 3vw;
            }
            .projectInfo .contn .intro .box .ctnt p{
                font-size: 14px;
                line-height: 2;
            }
            .projectInfo .contn .pic{
                padding-bottom: 56.25%;
                margin-right: -6vw;
            }
            .projectInfo .contn .pic .btns{
                width: 38vw;
                left: 0px;
                height: 55px;
            }
            .projectInfo .contn .pic .letter{
                display: block;
            }
            .projectInfo .contn .details{
                padding-top: 40px;
                padding-bottom: 60px;
                padding-left: 7%;
            }
            .projectInfo .contn .details p{
                font-size: 14px;
                line-height: 2;
            }
            .projectInfo .contn .details p + p{
                margin-top: 30px;
            }
            .projectInfo .contn .data{
                margin-left: -6vw;
            }
            .projectInfo .contn .member{
                margin:0px -6vw;
                margin-top: -60px;
                padding-top: 150px;
            }
        }

        .leaving.disappear{
            top: 0px;
            left: 0px;
            opacity: 0;
            transition: initial;
        }
        .start .projectInfo .letters .lft span,
        .first .projectInfo .letters .lft span{
            right: 7.3vw;
        }
        .start .projectInfo .letters .rht span,
        .first .projectInfo .letters .rht span{
            right: calc(100% + 7.3vw);
        }
        .start .projectInfo .letters span,
        .start .projectInfo .contn .intro .box .ctnt,
        .start .projectInfo .contn .intro .prName h2{
            transition-delay: .1s;
        }
        .projectInfo .contn .intro .box .ctnt{
            transform:translateX(200px);
            opacity: 0;
            transition: 1.2s cubic-bezier(.645,.045,.355,1) 2.8s;
        }
        .start .projectInfo .contn .intro .box .ctnt,
        .first .projectInfo .contn .intro .box .ctnt{
            transform: translateX(0px);
            opacity: 1;
        }
        .projectInfo .contn .pic .letter span{
            transform: translateY(100px);
            transition: 1s 2.8s cubic-bezier(.645,.045,.355,1);
        }
        .first .projectInfo .contn .pic .letter span,
        .start .projectInfo .contn .pic .letter span{
            transform: translateY(0px);
        }
        .start .projectInfo .contn .pic .letter span{
            transition-delay: .1s;
        }
        .projectInfo .contn .intro .box .line i{
            transition: all .8s 3s cubic-bezier(.645,.045,.355,1);
        }
        .start .projectInfo .contn .intro .box .line i,
        .first .projectInfo .contn .intro .box .line i{
            flex: 1;
        }
        .start .projectInfo .contn .intro .box .line i{
            transition-delay: .2s;
        }
        .projectInfo .contn .intro .box .line span{
            transform: scale(0);
            transition: all .4s 3.7s cubic-bezier(.645,.045,.355,1);
        }
        .start .projectInfo .contn .intro .box .line span,
        .first .projectInfo .contn .intro .box .line span{
            transform: scale(1);
        }
        .start .projectInfo .contn .intro .box .line span{
            transition-delay: .9s;
        }
        .projectInfo .contn .intro .prName h2{
            transform: translateY(100%);
            transition: 1s 3s cubic-bezier(.645,.045,.355,1);
        }
        .start .projectInfo .contn .intro .prName h2,
        .first .projectInfo .contn .intro .prName h2{
            transform: translateY(0px);
        }
        
        .projectInfo .contn .pic .picSwiper{
            opacity: 0;
            transition: ease 1.5s 3.3s;
        }
        .start .projectInfo .contn .pic .picSwiper,
        .first .projectInfo .contn .pic .picSwiper{
            opacity: 1;
        }
        .start .projectInfo .contn .pic .picSwiper{
            transition-delay: .5s;
        }

        .leaving.jump.btm{
            opacity: 1;
            transition: 1.2s ease opacity;
        }